<template>
    <div class="ff-home">
        <header class="ff-home-header">
            <div class="ff-home-header--box">
                <div class="ff-home-user">
                    <span>
                        <span class="ff-home-user-area">{{$store.state.area}}</span>
                        <i class="iconfont icon-shangjiantou"></i></span>
                    <span class="ff-home-nav-interval">|</span>
                    <span class="ff-home-user-store">{{`${$store.state.userCode}(${$store.state.user})`}}<i class="iconfont icon-shangjiantou"></i></span>
                </div>
                <div class="ff-home-nav">
                    <span v-for="(list, index) of nav" :key="index" class="ff-home-nav--box">
                        <span @click="skip(list)" class="ff-home-nav--link iconfont" :class="list.lists? 'ff-home-nav--up-down' : ''">
                            <i class="iconfont ff-header-iconfont-size" :class="list.icon"></i>
                            {{list.label}}
                        </span>
                        <div v-if="list.lists" class="ff-home-nav--lists">
                            <ul>
                                <li v-for="(data, i) of list.lists" :key="i" @click="skip(data)">{{data.label}}</li>
                            </ul>
                        </div>
                    </span>
                </div>
            </div>
        </header>
        <body class="ff-home-body">
            <div class="ff-home-body--nav">
                <ul>
                    <!--<li>
                        <span class="ff-home-body-nav&#45;&#45;jump" @click="goGoodsWeb">商品网站首页</span>
                        <i class="iconfont icon-youjiantou"></i>
                    </li>-->
                    <li v-for="(list, index) of routeRecord" :key="index" >
                        <span
                            @click="goJump(list.path, index)"
                            :class="index !== 0 && index === routeRecord.length - 1? 'ff-home-body-nav--active' : 'ff-home-body-nav--jump'"
                        >{{list.label}}</span>
                        <i class="iconfont icon-youjiantou" v-if="index < routeRecord.length - 1"></i>
                    </li>
                </ul>
            </div>
            <keep-alive :include="['walk']">
                <router-view></router-view>
            </keep-alive>
        </body>
        <!--<el-popover
            placement="left"
            :popper-options="{ boundariesElement: 'body', gpuAcceleration: false }"
            trigger="manual"
            v-model="suspension"
        >
            <div class="ff-home-suspension" @click="goWalk" slot="reference" v-if="$route.path !== '/walk'">
                <div class="ff-home-suspension-icon">
                    <i class="iconfont icon-gouwuche1-copy"></i>
                </div>
                <div class="ff-home-suspension-label">逛一逛</div>
            </div>
            &lt;!&ndash;<span class="ff-home-suspension-tip">热卖款可以预定哦~</span>&ndash;&gt;
            <span class="ff-home-suspension-tip">装修中,敬请期待...</span>
        </el-popover>-->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                nav: [
                    {
                        url: '/recommend',
                        label: '选款推荐',
                        link: true,//表示只跳转本页的
                        lists: [
                            /*{
                                label: '逛一逛',
                                url: '/walk',
                                link: true,//表示只跳转本页的
                            }*/
                        ]
                    },
                    {
                        url: '',
                        label: '我的快鱼',
                        disabled: true,//表示暂不支持
                        lists: [
                            {
                                label: '我的收藏',
                                url: 'http://erp.fastfish.com/mall/PersonCenter/attention?tab=first',
                            },
                            /*{
                                label: '我的预定',
                                url: 'http://erp.fastfish.com/mall/PersonCenter/reservation?tab=first'
                            },*/
                            {
                                label: '我的足迹',
                                url: 'http://erp.fastfish.com/mall/PersonCenter/footprint?tab=first',
                            }
                        ]
                    },
                    /*{
                        url: 'http://erp.fastfish.com/mall/PersonCenter/comment?tab=first',
                        label: '我的评价'
                    },*/
                    {
                        url: 'http://erp.fastfish.com/mall/PersonCenter/order?tab=first',
                        label: '订单信息'
                    },
                    /*{
                        url: 'http://erp.fastfish.com/mall/PersonCenter/cart?tab=first',
                        label: '购物车',
                        icon: 'icon-gouwuche1-copy'
                    }*/
                ],//头部导航
                label: '',//当前页面名
                suspension: false, //悬浮框
            }
        },
        computed: {
            /* 路由记录 */
            routeRecord () {
                return this.$store.state.recordRoute;
            }
        },
        methods: {
            /*跳转到商品网站*/
            goGoodsWeb () {
                window.location.href = 'http://erp.fastfish.com/mall/index';
            },
            /*产品要求原页面跳转到另一个页面,点击这个的时候依然返回到原页面*/
            goJump (list, index) {
                if(index === this.routeRecord - 1) return;
                this.$router.push(list);
                if(list === '/recommend') return;
                this.$store.commit('delRecordRoute');
            },
            /*跳转*/
            skip (item) {
                if(item.link) return this.$router.push(item.url);
                if(item.disabled) return;
                window.location.href = item.url;
            },
            /* 获取首页数据 */
            getRecommendHomeData () {
                this.$store.dispatch('getRecommendHomeData');
            },
            /*跳转到逛一逛*/
            goWalk () {
                this.$router.push('/walk');
            }
        },
        mounted () {
            this.getRecommendHomeData();
            this.$nextTick(() => {
                this.suspension = true;
            })
        }
    }
</script>

<style type="text/less" lang="less" module>

</style>
<style type="text/less" lang="less">
    @import "~@/assets/css/font.less";
    .ff-home-suspension-tip {
        font-size: 14px;
        line-height: 44px;
        padding: 0 28px;
        white-space: nowrap;
    }
    .ff-home {
        width: 100%;
        position: relative;
        box-sizing: border-box;
        .ff-home-header {
            background-color: @head-bc;
            z-index: 4;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            box-sizing: border-box;
            padding: 0 80px;
            min-width: 1180px;
        }
        .ff-home-header--box {
            margin: 0 auto;
            color: @head-font-color;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 36px;
            box-sizing: border-box;
        }
        .ff-home-body {
            width: 100%;
            min-width: 1180px;
            padding: 36px 80px 0;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .ff-header-iconfont-size {
            font-size: @head-font-size;
        }
        .ff-home-user {
            padding-left: 20px;
        }
        .ff-home-user-area {
            display: inline-block;
            min-width: 60px;
        }
        .ff-home-user-store {
            padding-left: 8px;
        }
        .ff-home-nav {
            display: flex;
            height: 36px;
        }
        .ff-home-nav--link {
            cursor: default;
            position: relative;
            padding: 0 8px;
        }
        .ff-home-nav--box {
            display: flex;
            align-items: center;
            position: relative;
            &:nth-child(4n) .ff-home-nav--link {
                &::before {
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 14px;
                    left: 0px;
                    top: 3px;
                    background-color: #fff;
                }
                &::after {
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 14px;
                    right: 0px;
                    top: 3px;
                    background-color: #fff;
                }
            }
            &:nth-child(1):hover, &:nth-child(2):hover {
                background-color: #fff;
                .ff-home-nav--lists {
                    display: block;
                }
                .ff-home-nav--up-down {
                    color: #666;
                    &::after {
                        color: #000;
                        transform: rotateZ(180deg);
                    }
                    &:hover {
                        color: @font-light-color;
                    }
                }
            }
        }
        /*有收起的导航列表的样式*/
        .ff-home-nav--up-down {
            height: 36px;
            line-height: 36px;
            padding-right: 18px;
            &::after {
                content: '\e648';
                position: absolute;
                top: 0;
                right: 0;
                font-size: 16px;
                color: #fff;
                transition: transform .2s ease-in;
            }
        }
        /*收起的导航列表*/
        .ff-home-nav--lists {
            display: none;
            width: calc(~"100% + 2px");
            box-sizing: border-box;
            position: absolute;
            left: -1px;
            top: 36px;
            background-color: #000;
            text-align: center;
            border: 1px solid #DDD;
            border-top: none;
            background-color: #fff;
            color: #666;
            font-weight: 400;
            padding-top: 10px;
            li {
                line-height: 25px;
                cursor: default;
                &:hover {
                    color: @font-light-color;
                }
            }
        }
        .ff-home-body--nav {
            overflow: hidden;
            line-height: 36px;
            box-sizing: border-box;
            border-bottom: 1px solid @body-border-color;
            li {
                float: left;
            }
            .ff-home-body-nav--active {
                color: @body-nav-active-font-color;
            }
            .ff-home-body-nav--jump:hover {
                text-decoration: underline;
                cursor: pointer;
            }
            .icon-youjiantou {
                padding: 0 6px;
            }
        }
        /*悬浮框*/
        .ff-home-suspension {
            position: fixed;
            cursor: default;
            z-index: 4;
            width: 55px;
            height: 80px;
            right: 3%;
            top: 30%;
            border: 1px solid #999;//rgba(253, 100, 66, .6);
            border-radius: 4px;
            background-color: #fff;
            font-size: 0;
            transition: border-color .2s ease;
            .ff-home-suspension-icon {
                min-width: 100%;
                height: 60%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fff;//rgba(253, 100, 66, .03);
                color: #999;//@font-light-color;
                transition: background-color .2s ease;
                .iconfont {
                    margin-top: 15px;
                    font-size: 36px;
                }
            }
            .ff-home-suspension-label {
                min-width: 100%;
                height: 40%;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                background-color: #fff;//rgba(253, 100, 66, .03);
                transition: background-color .2s ease;
                color: #999;//@font-light-color;
            }
            /*&:hover {
                border-color: rgba(253, 100, 66);
                .ff-home-suspension-icon {
                    background-color: rgba(253, 100, 66);
                    color: #fff;
                }
                .ff-home-suspension-label {
                    background-color: rgba(253, 100, 66);
                    color: #fff;
                }
            }*/
        }
    }
</style>
